<template>
	<view class="container">
		<view class="list">
			<view class="item" v-for="(item,index) in data.userList">
				<view class="infobox">
					<view class="imgs">
						<image :src="item.head?item.head:$defaultAvatar" mode=""></image>
					</view>
					<view class="info">
						<view class="name">
							{{item.nickname?item.nickname:'未填写昵称'}}
						</view>
						<view class="mobile">
							{{item.mobile}}
						</view>
					</view>
				</view>

				<view class="status active" v-if="item.ID==data.userInfo.ID">
					登录中
				</view>
				<view class="status" v-else @click="setLogin(item,index)">
					切换账号
				</view>
				<uni-icons class="del"  v-if="item.ID!=data.userInfo.ID" @click="del(index,item.ID==data.userInfo.ID)" type="trash" size="15" color="#999"></uni-icons>
			</view>
		</view>
		<view class="btns" @click="logout">
			添加账号
		</view>

	</view>
</template>

<script setup>
	import {ref,reactive,getCurrentInstance} from "vue";
	import {onLoad,onShow,onPullDownRefresh,onReachBottom} from "@dcloudio/uni-app";



	const {proxy} = getCurrentInstance();
	const data = reactive({
		userInfo:{},
		userList:[]
	})
	onLoad((option)=>{
		data.userInfo=uni.getStorageSync('userInfo')

			data.userList=uniqueJSON(uni.getStorageSync('userList'),'mobile')

	})
	onShow(()=>{
	})
	onPullDownRefresh(()=> {
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		})
	onReachBottom(()=>{
		console.log('onReachBottom')
	})
	function uniqueJSON(arr, attrName) {
			let result = arr.filter((item, index, self) => {
				return index === self.findIndex((t) => (t[attrName] === item[attrName]));
			});
			console.log("原json数组: ", arr);
			console.log("去重结果: ", result);
			return result;
		}
	function logout(){
		uni.navigateTo({
			url:'/pages/login/login'
		})
	}
	function del(index,state) {
		data.userList.splice(index, 1)
		uni.setStorageSync('userList',data.userList)
	}
	function setLogin(item,index){

		proxy.$request({
			url: `api/login/`,
			method: 'post',
			data: {
				mobile:item.mobile,
				password:item.password
			},
			success(res) {
				console.log(res)
				uni.showToast({
					icon: 'none',
					title: res.errmsg
				})
				if (res.errno == 0) {
					res.data['password']=item.password
					data.userList.splice(index, 1)
					data.userList.unshift(res.data)
					uni.setStorageSync('userList',data.userList)
					data.userInfo=res.data
					uni.setStorageSync('userInfo',res.data)

					setTimeout(()=>{
						uni.switchTab({
							url:'/pages/personal/index'
						})
					},1000)
				}
			}
		})
	}
	function shopClassList (){
		proxy.$request({
			url: `api/shopClassList/?page=1&size=999`,
			method: 'get',
			success(res) {
			}
		})
	}
</script>

<style lang="scss" scoped>
	.container{
		padding: 30upx;
		.list{
			.item{
				background-color: #fff;
				padding: 30upx;
				border-radius: 30upx;
				display: flex;
				margin-bottom: 20upx;
				justify-content: space-between;
				position: relative;

				.del {
					position: absolute;
					top: 10upx;
					right: 10upx;
				}
				.infobox{
					display: flex;
					.imgs{
						margin-right: 20upx;
						image{
							width: 80upx;
							height: 80upx;
							border-radius: 50%;
						}
					}
					.info{
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.name{
							font-size: 28upx;
							color:#333;
							font-weight: bold;
						}
						.mobile{
							font-size: 28upx;
						}
					}
				}
				.status{
					display: flex;
					align-items: center;
					font-size: 28upx;
				}
				.active{
					color: $color4;
				}
			}
		}
		.btns{
			padding: 20upx;
			background-color: $color4;
			text-align: center;
			color: #fff;
			border-radius: 20upx;
			margin-top: 30upx;
		}
	}
</style>
